<template>
	<div style="width:100%;height:100%;position:relative;background-color:white;">
		<div id="canvas" style="width: 100%; height: 100%;"></div>
		<div id="js-properties-panel"></div>
		<Form inline class="custom-tools">
			<FormItem label="流程分类:" :label-width="80">
				<Input v-model="modeler._definitions.targetNamespace" placeholder="请输入流程分类"></Input>
			</FormItem>
			<FormItem>
				<ButtonGroup>
					<Button @click="saveBpmnXml">下载BPMN</Button>
					<Button @click="showBpmnXml">查看XML</Button>
					<Button @click="deployBpmnXml" type="primary">直接部署</Button>
				</ButtonGroup>
			</FormItem>
		</Form>
		<Modal v-model="showBpmnXmlModal" @on-visible-change="bpmnModalChange" title="bpmn xml 查看" width="80%" footer-hide>
			<Input v-model="bpmnXml" type="textarea" :rows="30" />
		</Modal>
	</div>
</template>

<script language="JavaScript">

import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
import sampleDiagram from './newDiagram.js';

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

import customTranslate from './customTranslate/customTranslate';
var customTranslateModule = {
  translate: [ 'value', customTranslate ]
};

export default {
	components: {},
	data() {
		return {
			modeler: {
				_definitions: {
					targetNamespace: ''
				}
			}, // bpmn 模型
			bpmnXml: '' ,// bpmnXml
			showBpmnXmlModal: false, // 显示 bpmn xml 字符串
		};
	},
	computed: {},
	watch: {},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			let procDefId = this.$route.params.procDefId || '';
			if (procDefId) {
				this.$request.get(`/admin/sys/workflow/definition/bpmnXml/${procDefId}`, {}, res => {
					this.bpmnXml = res.data || sampleDiagram.bpmnXml;
					this.initModeler();
				}, false, true, true);
			} else {
				this.bpmnXml = sampleDiagram.bpmnXml;
				this.initModeler();
			}
		});
	},
	methods: {
		// 初始化模型
		initModeler: function() {
			let modeler = new BpmnModeler({
				container: '#canvas',
				propertiesPanel: {
					parent: '#js-properties-panel'
				},
				additionalModules: [
					propertiesPanelModule, 
					propertiesProviderModule,
					customTranslateModule
				],
				moddleExtensions: {
					camunda: camundaModdleDescriptor
				}
			});
			modeler.importXML(this.bpmnXml).then(() => {
				this.modeler = modeler;
			});
		},
		// 保存 bpmn xml
		saveBpmnXml: function() {
			this.modeler.saveXML({format: true}).then(bpmn => {
				this.$utils.saveTextToFile(bpmn.xml, "process.bpmn");
			});
		},
		// 在线显示XML文本
		showBpmnXml: function() {
			this.modeler.saveXML({format: true}).then(bpmn => {
				this.bpmnXml = bpmn.xml;
				this.showBpmnXmlModal = true;
			});
		},
		// 对话框关闭后更新模型
		bpmnModalChange: function(show) {
			if (!show) {
				this.modeler.importXML(this.bpmnXml);
			}
		},
		// 部署 bpmn xml
		deployBpmnXml: function() {
			this.$Modal.confirm({
				title: '确认？',
				content: '是否部署流程？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/workflow/deployment/deployText',
						{
							text: this.bpmnXml,
							name: this.modeler._definitions.rootElements[0].name
						},
						res => {
							this.$Notice.success({
								title: '提示',
								desc: '流程部署成功！'
							});
						},
						false,
						true,
						true
					);
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped="scoped">
#js-properties-panel {
	position:absolute;
	top: 0;
	right: 0;
	width: 350px;
	height: 100%;
	overflow-y: auto;
}
.custom-tools {
	position: absolute;
	right: 400px;
	bottom: 20px;
}
.bpmn-modal {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
</style>
